import React from 'react'
import ReactDOM from 'react-dom'
import { Link, IndexLink } from 'react-router'
import WechatImage from '../WechatImage'


class AssetGridCell extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    var $this = $(ReactDOM.findDOMNode(this));
    // $this.height($this.width())
  }

  componentDidUpdate() {

  }

  mouseOver() {
    if (!this.props.disableHover) {
      var $this = $(ReactDOM.findDOMNode(this));
      $this.addClass("cell-active")
    }

  }

  mouseOut() {
    if (!this.props.disableHover) {
      var $this = $(ReactDOM.findDOMNode(this));
      $this.removeClass("cell-active")
    }
  }

  render() {
    var data = this.props.data
    var news = this.props.news;
    return(
      <div className="col-sm-4 asset-grid-cell"
            onMouseOver={(event)=>this.mouseOver(event)}
            onMouseOut={(event)=>this.mouseOut(event)}>
        <div className="created-at cell-item">{data.created_at}</div>
        <div className="title cell-item">{data.title}</div>
        <div className="image cell-item cell-image">
          <WechatImage
            media_id = {data.thumb_media_id}
          />
        </div>
        <div className="digest cell-item">{data.digest}</div>
        <div className="links">
          <a className="link" onClick={(event)=>this.props.onAssetEdit(event, news)}>
            <img src="/public/img/editor-icon.png"/>
          </a>
          <span className="line"></span>
          <a className="link"
             onClick = {(event)=> this.props.onAssetDelete(event, news)}>
            <img src="/public/img/delete-icon.png"/>
          </a>
        </div>
      </div>
    )
  }
}

export default AssetGridCell
